<template>
    <el-card shadow="never" class="aui-card--fill">
      <div class="mod-bonus__bonusprocess}">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
          <el-form-item>
            <el-select
              v-model="dataForm.bonusListId"
              filterable
              clearable
              placeholder="请选择奖金"
            >
              <el-option
                v-for="item in bonusList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList()">{{ $t('query') }}</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
          <el-table-column label="奖金名称" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.bonusListVo.title }}
            </template>
          </el-table-column>
          <el-table-column label="奖金类型" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.bonusListVo.bonusTypeName }}
            </template>
          </el-table-column>
          <el-table-column label="奖金金额" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.bonusListVo.money }}
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="申请人" header-align="center" align="center"></el-table-column>
          <el-table-column prop="collegeStatus" label="学院审核" header-align="center" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.collegeStatus === 0" size="small" type="info">待审核</el-tag>
              <el-tag v-if="scope.row.collegeStatus === 1" size="small" type="success">审核通过</el-tag>
              <el-tag v-if="scope.row.collegeStatus === 2" size="small" type="danger">审核未通过</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="departmentStatus" label="部门审核" header-align="center" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.departmentStatus === 0" size="small" type="info">待审核</el-tag>
              <el-tag v-if="scope.row.departmentStatus === 1" size="small" type="success">审核通过</el-tag>
              <el-tag v-if="scope.row.departmentStatus === 2" size="small" type="danger">审核未通过</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createDate" label="申请时间" header-align="center" align="center"></el-table-column>
          <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="checkCondition(scope.row.applyingReasons)">申请理由</el-button>
              <el-button type="text" size="small" @click="downloadMultiple(scope.row.fileUrls, scope.row.userName)">申请材料</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
        </el-pagination>
        <el-dialog
        width="50%"
        :title="conditionTest"
        :visible.sync="innerVisible"
        :show-close="false"
        append-to-body>
      </el-dialog>
      </div>
    </el-card>
  </template>
  
  <script>
  import mixinViewModule from '@/mixins/view-module'
  export default {
    mixins: [mixinViewModule],
    data () {
      return {
        mixinViewModuleOptions: {
          getDataListURL: '/bonus/bonusprocess/page',
          getDataListIsPage: true,
          deleteURL: '/bonus/bonusprocess',
          deleteIsBatch: true
        },
        dataForm: {
          id: '',
          bonusListId: '',
          userId: ''
        },
        stuUserList: [],
        bonusList: [],
        innerVisible: false,
        conditionTest: ''
      }
    },
    created() {
      this.listBonus();
    },
    methods: {
      checkCondition(item) {
        this.innerVisible = true
        this.conditionTest = item
      },
      listBonus() {
        this.$http.get("/bonus/bonuslist/list").then(({ data }) => {
          this.bonusList = data.data;
        });
      },
      async downloadMultiple(fileUrls, userName) {
        const fileUrlList = fileUrls.split(',').map(url => url.trim());
        for (let i = 0; i < fileUrlList.length; i++) {
          await this.download(fileUrlList[i], userName + '_' + i+1);
        }
      },
      // 下载的具体方法
      async download (url, name) {
        let response = await fetch(url)
        // 内容转变成blob地址
        let blob = await response.blob()
        // 创建隐藏的可下载链接
        let objectUrl = window.URL.createObjectURL(blob)
        let a = document.createElement('a')
        a.style.display = "none";
        //地址
        a.href = objectUrl
        //修改文件名
        console.log(name + 'name')
        a.download = name
        // 触发点击
        document.body.appendChild(a)
        a.click()
        //移除
        URL.revokeObjectURL(a.href);
      }
    }
  }
  </script>
  